<template>
  <div :style="{ padding: '0 32px 32px 32px' }">
    <!-- <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4> -->
    <div style="marginBottom: 10px; line-height: 28px">
      <h4 style="display: inline-block">{{ title }}</h4>
      <div style="display: inline-flex; float: right">
        年份：
        <a-select style="width: 100px" :default-value="yearsList[0]" @change="handleChange" >
          <a-select-option v-for="(item, index) in yearsList" :key="index" :value="item">{{ item }}</a-select-option>
        </a-select>
      </div>
    </div>
    <v-chart
      height="254"
      :data="data"
      :forceFit="true"
      :padding="['auto', 'auto', '40', '100']">
      <v-tooltip />
      <v-axis />
      <v-legend />
      <v-bar position="dep*amount" color="name" :adjust="adjust"/>
    </v-chart>
  </div>
</template>

<script>
export default {
  name: 'MyBar',
  props: {
    title: {
      type: String,
      default: ''
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    scale: {
      type: Array,
      default: () => {
        return [{
          dataKey: 'dep',
          min: 2
        }, {
          dataKey: 'amount',
          title: '金额',
          min: 1,
          max: 22
        }]
      }
    },
    tooltip: {
      type: Array,
      default: () => {
        return [
          'dep*amount',
          (dep, amount) => ({
            name: dep,
            value: amount
          })
        ]
      }
    }
  },
  data () {
    return {
      yearsList: [],
      adjust: [{
        type: 'dodge',
        marginRatio: 1 / 32
      }]
    }
  },
  created () {
    let thisYear = new Date().getFullYear()
    for (let i = 0; i < 7; i++) {
      this.yearsList.push(thisYear + '')
      thisYear--
    }
  },
  methods: {
    handleChange (e) {
      this.$emit('changeYear', e)
    }
  }
}
</script>
